<template>
  <div class="spongepantsEdit" @click.stop="aotuTab=false">
    <div>
      <el-button type="primary" style="margin-bottom: 10px" size="mini" @click="preserve('A')">{{ $t('btn.save') }}</el-button>
      <el-dropdown size="mini" split-button style="margin: 0 10px;" type="success" trigger="click" placement="bottom" @click="preserve('B')">
        提交
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="preserve('B')">提交</el-dropdown-item>
          <el-dropdown-item @click.native="noProSubmit()">反提交</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown size="mini" split-button type="warning" trigger="click" placement="bottom" @click="audit()">
        审核
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="audit()">审核</el-dropdown-item>
          <el-dropdown-item @click.native="noAudit()">反审核</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span style="color: red;font-size: 14px;margin-left: 10px">计价用量的计算方式：((上底+下底)/2+长)*宽*厚*数量/1000000</span>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="process" label-width="100px" :rules="proRules">
          <el-form-item :label="$t('market.documentstatus')">
            <el-tag :type="process.stateColor">{{ process.fdocumentStatus }}</el-tag>
          </el-form-item>
          <el-form-item :label="$t('market.cust')" prop="fname">
            <el-input
              v-model.trim="process.fname"
              size="mini"
              :disabled="isDisabled"
            />
          </el-form-item>
          <el-form-item label="编号" prop="fbillNo">
            <el-input
              v-model.trim="process.fbillNo"
              size="mini"
              disabled
            />
          </el-form-item>
          <el-form-item :label="$t('market.fmaterial')" prop="fmaterialId">
            <el-input
              v-model.trim="process.fnumber"
              placeholder="请选择物料"
              size="mini"
              :disabled="isDisabled"
            >
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="materia(-1)"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('shop.fname2')" prop="materialName">
            <el-input v-model.trim="process.materialName" size="mini" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fmodel2')" prop="fmodel" label-width="5.8vw">
            <el-input v-model.trim="process.fmodel" size="mini" disabled />
          </el-form-item>
          <el-form-item :label="$t('shop.fspecificaTion')" prop="fspecificaTion">
            <el-input v-model.trim="process.fspecificaTion" size="mini" disabled />
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="process.fcreator" size="mini" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.createDate')">
            <el-input v-model="process.fcreateDate" size="mini" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.fdescripTion')" prop="fdescripTion">
            <el-input v-model.trim="process.fdescripTion" size="mini" disabled style="width: 600px" />
          </el-form-item>
        </el-form>
        <div class="header-name">
          <el-button class="newBtn" style="margin-bottom: 5px;" size="mini" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" @click="batchFill">{{ $t('btn.batchFill') }}<!--批量填充--></el-button>
        </div>
        <jc-table
          v-if="isRouterAlive"
          :table-data="tableData"
          :table-header="tableHeard"
          :table-height="tableHeight"
          serial
          @rowClick="techClick"
          @cellClick="cellClick"
        >
          <el-table-column label="部件名称" prop="" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fpartsName"
                :disabled="isDisabled"
                size="mini"
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.fmaterial')" prop="" align="center" width="150px">
            <template slot-scope="scope">
              <el-input
                v-model.trim="scope.row.fnumber"
                :disabled="isDisabled"
                placeholder="请选择物料"
                size="mini"
                @input="getAtuo(scope.$index, scope.row.fnumber)"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="materia(scope.$index)"
                />
              </el-input>
              <div v-if="aotuTab && scope.$index === indexSelf" :class="indexSelf<6 ? 'tabPosit': 'tabPosit1'">
                <number-code :fnumber="fnumber" :fnumbers="fnumbers" @material="materialData" />
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('shop.fname2')" prop="fname" align="center" :show-overflow-tooltip="true" />
          <el-table-column :label="$t('market.fmodel2')" prop="fmodel" align="center" :show-overflow-tooltip="true" />
          <el-table-column :label="$t('market.fdescripTion')" prop="fdescripTion" align="center" min-width="200px" :show-overflow-tooltip="true" />
          <el-table-column label="上底(cm)" prop="ftop" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.ftop"
                :disabled="isDisabled"
                size="mini"
                @change="volumeChange(scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="下底(cm)" prop="fout" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.fout"
                :disabled="isDisabled"
                size="mini"
                @change="volumeChange(scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="长(cm)*宽(cm)*厚度(cm)" align="center" min-width="230px">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.flength"
                size="mini"
                style="width: 65px"
                :disabled="isDisabled"
                @change="volumeChange(scope.$index)"
              />*
              <el-input-number
                v-model="scope.row.fwidth"
                size="mini"
                style="width: 65px"
                :disabled="isDisabled"
                @change="volumeChange(scope.$index)"
              />*
              <el-input-number
                v-model="scope.row.fhelght"
                size="mini"
                style="width: 65px"
                :disabled="isDisabled"
                @change="volumeChange(scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.fqty')" prop="fqty" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.fqty"
                :disabled="isDisabled"
                size="mini"
                @change="volumeChange(scope.$index)"
              />
            </template>
          </el-table-column>
          <el-table-column label="参数" prop="fparameter" align="center">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.fparameter"
                size="mini"
                :disabled="isDisabled"
              />
            </template>
          </el-table-column>
          <el-table-column label="计价用量" align="center" prop="fdosage" />
          <el-table-column :label="$t('market.note')" align="center" prop="fnote">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fnote"
                :disabled="isDisabled"
                size="mini"
              />
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.handle')" align="center">
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                :disabled="isDisabled"
                @click="proDelect(scope.$index)"
              >{{ $t('shop.delete') }}</el-button>
            </template>
          </el-table-column>
        </jc-table>
      </el-tab-pane>
      <el-tab-pane :label="$t('market.other')" name="journal">
        <jc-table
          :table-data="journalData"
          :table-header="journalHeard"
          :table-height="tableHeight1"
          serial
        />
        <jc-pagination
          v-show="journal.total > 0"
          :total="journal.total"
          :page.sync="journal.pageNum"
          :limit.sync="journal.pageSize"
        />
        <!--@pagination="journalLog"-->
      </el-tab-pane>
    </el-tabs>
    <!--    物料弹窗-->
    <material v-if="isMateria" :fnumbers="fnumbers" @material="materialData" />
  </div>
</template>

<script>
import {
  querySpongeDetails,
  updateSponge,
  notReviewSponge,
  againReviewSponge,
  reviewSponge
} from '@/api/workshop/spongePants'
import searData from '@/components/Search/mixin'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'
import { toMxAmina } from '@/components/ToMxamineState'

export default {
  components: {
    material: () => import('@/views/market/marketManage/createMarkerOrder/components/material'),
    numberCode: () => import('@/components/NumberCode')
  },
  mixins: [searData, autocomplete],
  data() {
    return {
      ftype: 14,
      activeName: 'first',
      active: 'first',
      fnumbers: '3-1-03-31,3-1-03-41',
      process: {
        fcreator: '',
        fcreateDate: '',
        fid: '',
        fname: '',
        fnumber: '',
        fmaterialId: '',
        fmodel: '',
        fdescripTion: '',
        materialName: '',
        fspecificaTion: '',
        fdocumentStatus: '创建'
      },
      fnumber: '',
      aotuTab: false,
      isMateria: false, // 物料
      indexSelf: 0,
      indexSelf1: 0,
      tableHeight: '62vh',
      tableHeight1: '70vh',
      tableData: [],
      delArr: [],
      total: 0, // 总条目
      pageNum: 1, // 当前页
      pageSize: 200, // 每页显示多少条数据
      tableHeard: [],
      journal: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      isDisabled: false,
      journalData: [],
      journalHeard: [
        { label: this.$t('market.operator'), prop: 'fname' },
        { label: this.$t('market.deaprt'), prop: 'fdeaprt' },
        { label: this.$t('market.describe'), prop: 'fdescribe' },
        { label: this.$t('market.ipSite'), prop: 'fip' },
        { label: this.$t('market.date1'), prop: 'createDate' }
      ],
      proRules: {
        fname: [
          { required: true, message: '请输入海绵库名称', trigger: 'blur' }
        ]
      },
      priceIndex: 0,
      isRouterAlive: true
    }
  },
  created() {
    if (this.$route.query.fbillNo) {
      this.queryWorkshopDetail() // 表头
    }
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 340px)' : '62vh'
    this.tableHeight1 = window.innerWidth > 1440 ? 'calc(100vh - 310px)' : '70vh'
  },
  methods: {
    // 局部刷新
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    },
    // 输入物料编码
    getAtuo(index, fnumber) {
      this.indexSelf = index
      this.aotuTab = true
      var vm = this
      clearTimeout(vm.timer) // 清除未执行的代码，重置回初始化状态
      vm.timer = setTimeout(() => {
        this.fnumber = fnumber
      }, 600)
    },
    // 监听长 宽 高,获取体积
    volumeChange(index) {
      const item = this.tableData[index]
      // item.fdosage = item.flength * item.fwidth * item.fhelght
      item.fdosage = ((item.ftop + item.fout) / 2 + item.flength) * item.fwidth * item.fhelght * item.fqty / 1000000
    },
    // 点击获取日志
    handleClick(tab) {
      if (tab.name === 'journal') {
        this.journalLog()
      }
    },
    // 详情
    queryWorkshopDetail() {
      const DATA = {
        fbillNo: this.$route.query.fbillNo
      }
      querySpongeDetails(DATA).then(res => {
        if (res.code === 0) {
          this.process = toMxAmina(res.data)
          this.isDisabled = this.process.fdocumentStatus === this.$t('market.state1') || this.process.fdocumentStatus === this.$t('market.state2')
          this.tableData = res.data.details
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 打开物料弹窗
    materia(index) {
      this.isMateria = true
      this.indexSelf = index
    },
    // 获取物料
    materialData(ev) {
      if (ev.fnumber) {
        if (this.indexSelf === -1) {
          this.process.fnumber = ev.fnumber
          this.process.fmaterialId = ev.fmaterialId
          this.process.fmodel = ev.fmodel
          this.process.fdescripTion = ev.fdescripTion
          this.process.fmaterName = ev.fname
          this.process.fspecificaTion = ev.fspecificaTion
        } else {
          const item = this.tableData[this.indexSelf]
          item.fnumber = ev.fnumber
          item.fmaterialId = ev.fmaterialId
          item.fmodel = ev.fmodel
          item.fname = ev.fname
          item.fdescripTion = ev.fdescripTion
          this.aotuTab = false
        }
      }
      this.isMateria = false
    },
    // 保存
    preserve(ev) {
      const DATA = {
        fdocumentStatus: ev,
        fname: this.process.fname,
        fmaterialId: this.process.fmaterialId,
        fid: this.process.fid,
        entry: this.tableData
      }
      this.$refs.purchaseRef.validate((valid) => {
        if (valid) {
          updateSponge(DATA).then(res => {
            if (res.code === 0) {
              this.queryWorkshopDetail()
              this.$message({ showClose: true, message: res.message, type: 'success' })
            } else {
              this.$message({
                type: 'error',
                dangerouslyUseHTMLString: true,
                message: res.message
              })
            }
          })
        } else {
          return false
        }
      })
    },
    // 反提交
    noProSubmit() {
      const DATA = {
        fdocumentStatus: 'A',
        fid: this.process.fid
      }
      notReviewSponge(DATA).then(res => {
        if (res.code === 0) {
          this.queryWorkshopDetail()
          this.delArr = []
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 审核
    audit() {
      const DATA = {
        fdocumentStatus: 'C',
        fid: this.process.fid
      }
      reviewSponge(DATA).then(res => {
        if (res.code === 0) {
          this.queryWorkshopDetail()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 反审核
    noAudit() {
      const DATA = {
        fdocumentStatus: 'D',
        fid: this.process.fid
      }
      againReviewSponge(DATA).then(res => {
        if (res.code === 0) {
          this.queryWorkshopDetail()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 点击表格行，获取下标
    techClick(row) {
      this.indexSelf1 = row.fseq
    },
    // 新增行
    newHang() {
      const data = {
        fentryId: 0,
        fpartsName: '',
        fmaterialId: '',
        fdescripTion: '',
        fmodel: '',
        fname: '',
        fnumber: '',
        fparameter: 1000000,
        ftop: 0,
        fout: 0,
        fqty: 1,
        fdosage: 0,
        flength: 0,
        fwidth: 0,
        fhelght: 0,
        fsupplierId: '',
        fpricelistId: '',
        fnote: ''
      }
      this.tableData.push(data)
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      this.property = column.property
      this.subscript = row.index
    },
    // 批量填充
    batchFill() {
      const item = this.tableData[this.subscript][this.property]
      this.tableData.map((res, index) => {
        if (index >= this.subscript) {
          res[this.property] = item
        }
      })
    },
    // 刪除
    proDelect(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scope>
.spongepantsEdit {
  @include listBom;
  .tabPosit {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: 3.8vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
  }
  .tabPosit1 {
    padding: 5px;
    box-shadow: 0 0 2px #aaa;
    position: absolute;
    top: -25.69vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    z-index: 9999;
  }
  .el-tabs {
    .header-name {
      margin-top: 16px
    }
    .el-form {
      display: flex;
      flex-wrap: wrap;
      .el-input .el-input__inner {
        height: 30px;
        line-height: 30px;
      }
      .el-form-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 35px;
        width: 275px;
        margin-bottom: 3px;
        .btnType {
          margin-right: 5px;
        }

        .el-date-editor.el-input {
          width: 100% !important;
        }

        .el-select {
          width: 100%;
        }
      }
    }
  }
}

</style>
